<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="beans.Account"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工主界面</title>
</head>
<body>
	<div>
		<a href="index.jsp">
			<div
				style="background-color: #2ecd77; height: 60px; float: left; width: 17%; padding: 0px; margin: 0px;">
				<div style="float: left; margin-top: 13px;">
					<span
						style="font-size: 30px; margin-left: 35px; font-family: '楷体'; font-weight: bold; color: white; margin-top: 13px;">
						差旅管理系统 </span>
				</div>
			</div>
		</a>
		<div
			style="height: 59px; float: right; width: 83%; border-bottom: 1px solid #000000;">
			<div style="float: right;">

				<div class="dropdown">
					<button class="dropbtn">下拉菜单</button>
					<div class="dropdown-content">
						<a href="../login.jsp">退出登录</a> <a href="self.jsp" target="menuFrame"
							id="0">个人信息</a>
					</div>
				</div>
			</div>
			<div style="float: right;">
				<div style="margin-top: 13px; margin-right: 20px">
					<span
						style="font-size: 30px; margin-left: 35px; font-family: '楷体'; font-weight: bold; color: black; margin-top: 13px;">
						欢迎: <%
					Account account = (Account) session.getAttribute("account");
					if (account != null)
						out.print(account.getAccountName());
					%>
					</span>
				</div>
			</div>
		</div>

	</div>
	<div style="display: flex; width: 100%;">
		<div class="nav_left">
			<ul>
				<li><a href="create_travel.jsp" target="menuFrame" onclick="SetColor(1)"
					id="1" style="color: #FFFFFF;">申请差旅</a></li>
				<li><a href="dispatch_travel.jsp" target="menuFrame"
					onclick="SetColor(2)" id="2">派遣管理</a></li>
				<li><a href="travel_view.jsp" target="menuFrame"
					onclick="SetColor(3)" id="3">进程查询</a></li>
			</ul>
			<hr />
			<ul>
				<li><a href="create_bill.jsp" target="menuFrame"
					onclick="SetColor(4)" id="4">报销申请</a></li>
				<li><a href="bill_view.jsp" target="menuFrame"
					onclick="SetColor(5)" id="5">进程查询</a></li>
				<li><a href="Month_report.jsp" target="menuFrame"
					onclick="SetColor(6)" id="6">月报汇报</a></li>
			</ul>

		</div>
		<div
			style="width: 83%; flex-direction: column-reverse; background-color: #ececec;">
			<iframe id="menuFrame" name="menuFrame" frameborder="no"
				scrolling="yes"
				style="width: 100%; height: 600px; overflow: visible;" src="create_travel.jsp"
				th.src=""> </iframe>
		</div>
	</div>
</body>
</html>
<script>
	function SetColor(a) {
		var bta = document.getElementById(a);
		bta.style.color = '#FFFFFF';
		for (var b = 1; b <= 10; b++) {
			if (b != a) {
				var bta1 = document.getElementById(b);
				bta1.style.color = "#858e96";
			}
		}
	}
</script>

<style>
* {
	margin: 0px;
}

.nav_left {
	background-color: #384b5e;
	flex-direction: row-reverse;
	height: 653px;
	width: 17%;
	color: #858e96;
}

li {
	font-size: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	list-style: none;
}

a {
	text-decoration: none;
	color: #858e96;
}

a:hover {
	text-decoration: none;
	color: white;
}

a:visited {
	color: #858e96;
}

a:active {
	color: white;
}

.dropbtn {
	background-color: #2ecd77;
	color: white;
	padding: 16px;
	font-size: 20.5px;
	border: none;
	cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
	position: relative;
	display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* 下拉菜单的链接 */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
	background-color: #f1f1f1
}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
	display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
	background-color: #4CAF50;
}
</style>